<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">

        body {
            background: #e41b65;
        }
        #box {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #e41b65;
        }
        #eye {
            animation: eye-move 10s infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 60px;
            border-radius: 100%;
            background-color: #eee;
            box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px;
            background-repeat: no-repeat;
            background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(0.12, #000), color-stop(0.22, #bfaa40), color-stop(0.4, #733326), color-stop(0.5, rgba(255, 255, 255, 0)));
            background-image: -moz-radial-gradient(50% 50% 0deg, #000 12%, #bfaa40 22%, #733326 40%, rgba(255, 255, 255, 0) 50%);
            background-image: -o-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100%);
            background-image: radial-gradient(50% 50% 0deg, circle, #000 12%, #bfaa40 22%, #733326 40%, rgba(255, 255, 255, 0) 50%);
        }
        #eye:before {
            content: "";
            position: absolute;
            top: 20%;
            left: 32%;
            border-radius: 5px;
            width: 10px;
            height: 10px;
            background-color: #fff;
            transform: skewX(-10deg);
            transition: all 0.2s ease;
        }
        #eye.close {
            height: 2px;
        }
        #eye.close:before {
            opacity: 0;
        }
        @keyframes eye-move {
            0% {
                background-position: 0px 0px;
            }
            20% {
                height: 20px;
                background-position: 0px 0px;
            }
            70% {
                background-position: -20px 0px;
                height: 70px;
            }
            100% {
                height: 60px;
            }
        }
    </style>
</head>
<body>
<div id="box">
    <div id="eye"></div>
</div>
</body>
</html>